<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>NetFlow 系统概览</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
        }
        .cbi-map {
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            padding: 20px;
        }
        .cbi-section {
            margin-bottom: 20px;
        }
        .cbi-section h3 {
            border-bottom: 1px solid #e0e0e0;
            padding-bottom: 10px;
            color: #333;
        }
        .table {
            display: table;
            width: 100%;
        }
        .tr {
            display: table-row;
        }
        .td {
            display: table-cell;
            padding: 8px;
            border-bottom: 1px solid #f0f0f0;
        }
        .td.left {
            text-align: left;
        }
        .chart-container {
            width: 100%;
            height: 300px;
        }
    </style>
</head>
<body>
    <h2>NetFlow 系统概览</h2>

    <div class="cbi-map">
        <div class="cbi-section">
            <h3>系统状态</h3>
            <div class="table">
                <div class="tr">
                    <div class="td left">状态:</div>
                    <div class="td left" id="status">
                        <em>正在加载...</em>
                    </div>
                </div>
                <div class="tr">
                    <div class="td left">版本:</div>
                    <div class="td left" id="version">
                        <em>正在加载...</em>
                    </div>
                </div>
                <div class="tr">
                    <div class="td left">运行时间:</div>
                    <div class="td left" id="uptime">
                        <em>正在加载...</em>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="cbi-section">
            <h3>网络负载</h3>
            <div class="table">
                <div class="tr">
                    <div class="td left">当前负载:</div>
                    <div class="td left" id="load_factor">
                        <em>正在加载...</em>
                    </div>
                </div>
                <div class="tr">
                    <div class="td left">拥塞指数:</div>
                    <div class="td left" id="congestion_index">
                        <em>正在加载...</em>
                    </div>
                </div>
                <div class="tr">
                    <div class="td left">当前带宽使用:</div>
                    <div class="td left" id="current_bw">
                        <em>正在加载...</em>
                    </div>
                </div>
                <div class="tr">
                    <div class="td left">总带宽:</div>
                    <div class="td left" id="total_bw">
                        <em>正在加载...</em>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="cbi-section">
            <h3>带宽分配</h3>
            <div class="chart-container" id="bandwidth_chart"></div>
        </div>
        
        <div class="cbi-section">
            <h3>实时流量监控</h3>
            <div class="chart-container" id="traffic_chart"></div>
        </div>
        
        <div class="cbi-section">
            <h3>应用流量分布</h3>
            <div class="chart-container" id="app_chart"></div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script>
        // 全局变量
        var statusPollTimer, metricsPollTimer, trafficChartTimer, appChartTimer;
        var trafficChart, bandwidthChart, appChart;
        var trafficData = [], timestamps = [];

        // 初始化图表函数（保持之前的代码不变）
        function initCharts() {
            // ... (之前的 initCharts 函数内容保持不变)
        }

        // 更新系统状态函数（保持之前的代码不变）
        function updateSystemStatus() {
            // ... (之前的 updateSystemStatus 函数内容保持不变)
        }

        // 更新网络指标函数（保持之前的代码不变）
        function updateNetworkMetrics() {
            // ... (之前的 updateNetworkMetrics 函数内容保持不变)
        }

        // 更新应用统计函数（保持之前的代码不变）
        function updateAppStats() {
            // ... (之前的 updateAppStats 函数内容保持不变)
        }

        // 确保 ECharts 完全加载
        if (window.echarts) {
            window.onload = function() {
                initCharts();
                
                // 初始更新
                updateSystemStatus();
                updateNetworkMetrics();
                updateAppStats();
                
                // 设置定时更新
                statusPollTimer = window.setInterval(updateSystemStatus, 30000);
                metricsPollTimer = window.setInterval(updateNetworkMetrics, 2000);
                appChartTimer = window.setInterval(updateAppStats, 10000);
            };

            window.onresize = function() {
                if (bandwidthChart) bandwidthChart.resize();
                if (trafficChart) trafficChart.resize();
                if (appChart) appChart.resize();
            };

            window.onunload = function() {
                window.clearInterval(statusPollTimer);
                window.clearInterval(metricsPollTimer);
                window.clearInterval(appChartTimer);
            };
        } else {
            console.error('ECharts 未加载');
        }
    </script>
</body>
</html>
